<template>
  <div class="home">
    <div class="top">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in list" :key="item.id">
          <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 搜索栏 -->
      <div>
        <van-search
          label="广州"
          show-action
          placeholder="请输入搜索关键词"
          class="sou"
        >
          <template #label>
            <div style="font-size: 20px" @click="adressFn">
              <p>广州</p>
            </div>
          </template>
          <template #action>
            <div style="font-size: 20px">
              <van-icon name="location-o" style="margin-left: 5px" />
            </div>
          </template>
        </van-search>
      </div>
    </div>
    <div>
      <ul class="nav-font">
        <li>
          <van-icon name="wap-home-o" size="40" color="green" />
          <p>整租</p>
        </li>
        <li>
          <van-icon name="friends-o" size="40" color="green" @click="clickFn" />
          <p>找房</p>
        </li>
        <li>
          <van-icon name="location-o" size="40" color="green" />
          <p>整租</p>
        </li>
        <li>
          <van-icon name="home-o" size="40" color="green" />
          <p>整租</p>
        </li>
      </ul>
    </div>
    <!-- <div class="gro"> -->
    <!-- <p>租房小组</p> -->
    <van-cell-group class="cont">
      <van-cell title="租房小组" value="更多" />
      <!-- <div class="gro">
        <h3>租房小组</h3>
        <p>更多</p>
      </div> -->
      <!-- <van-cell title="单元格" value="内容" label="描述信息" /> -->
      <div class="tt">
        <van-grid direction="horizontal" :column-num="2" :gutter="10">
          <van-grid-item
            icon="photo-o"
            text="文字"
            v-for="item in gropsList"
            :key="item.id"
          >
            <img
              :src="`http://liufusong.top:8080${item.imgSrc}`"
              alt=""
              style="width: 50px"
            />
            <p>{{ item.title + item.desc }}</p>
          </van-grid-item>
          <!-- <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" /> -->
        </van-grid>
      </div>
    </van-cell-group>
    <!-- </div> -->
  </div>
</template>

<script>
import { homeSwiperApi, homeGropsApi } from "@/api";
export default {
  data() {
    return {
      list: [],
      gropsList: [],
    };
  },
  mounted() {
    this.gethomeSwiper();
    this.gethomeGrops();
  },
  methods: {
    async gethomeSwiper() {
      try {
        const res = await homeSwiperApi();
        this.list = res.data.body;
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    },
    async gethomeGrops() {
      try {
        const res = await homeGropsApi();
        this.gropsList = res.data.body;
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    },
    clickFn() {
      this.$router.push({
        path: "search",
      });
    },
    adressFn() {
      // console.log(1);
      this.$router.push({
        path: "/city",
      });
    },
  },
};
</script>

<style>
.my-swipe .van-swipe-item {
  width: 375px;
  height: 212px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-swipe-item img {
  width: 100%;
}
.top {
  position: relative;
}
.sou {
  position: absolute;
  left: 40px;
  top: 20px;
  padding: 0;
}
.nav-font {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-bottom: 5px;
}
.fz {
  display: flex;
  justify-content: space-around;
}

* p {
  font-size: 14px;
}
</style>
